import { cancelOrder } from '@/service/apis/order';
import { View, Text, Image, Button } from '@tarojs/components';
import { getOrderStatus } from '@/subPages/order/utils';
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui';
import './style.scss';

const orderStatusMap = {
  1: '待付款',
  2: '待服务',
  3: '已完成',
  4: '已取消',
  5: '退款审核中',
  6: '已退款',
};

const AppointItem = ({ orderInfo }) => {
  const {
    store_name,
    store_logo,
    goods_pic_url,
    goods_name,
    order_status,
    store_id,
    number,
    order_price,
    order_sn,
    order_pay,
    add_time,
  } = orderInfo;

  // 取消订单
  const cancelAppoint = (e: any) => {
    e.stopPropagation();
    Taro.showModal({
      title: '取消确认',
      content: '订单还未付款，确认取消吗',
      cancelText: '再考虑下',
      confirmText: '取消订单',
      confirmColor: '#f82256',
      success: async function (res) {
        if (res.confirm) {
          console.log('取消订单');
          try {
            await cancelOrder({
              order_sn,
            });
            Taro.showToast({
              title: '订单取消成功',
              duration: 2000,
            });
          } catch (error) {
            Taro.showToast({
              title: '订单取消失败',
              duration: 2000,
            });
          }
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      },
    });
  };
  // 查看店铺详情
  const lookUpShop = () => {
    Taro.navigateTo({
      url: `/subPages/shop/detail?id=${store_id}`,
    });
  };
  // 点击订单列表卡片跳转详情页-订单详情页面
  const onHandle = () => {
    Taro.navigateTo({
      url: `/subPages/order/detail/index?type=2&orderCode=${order_sn}`,
    });
  };

  const orderStatus = getOrderStatus(order_status);

  return (
    <View className="order-item-wrap" onClick={onHandle}>
      <View className="item-top" onClick={lookUpShop}>
        <View className="shop-wrap">
          <Image mode="aspectFit" src={store_logo} />
          <Text>{store_name}</Text>
          <AtIcon value="chevron-right" color="#CCCCCC" size={14} />
        </View>
        <Text className="order-status">{orderStatusMap[orderStatus]}</Text>
      </View>
      <View className="order-info">
        <Image mode="aspectFit" className="product-img" src={goods_pic_url} />
        <View className="product-text">
          <Text className="title">{goods_name}</Text>
          {/* <Text className="desc">助浴</Text> */}
          {/* <Text className="desc">服务时间</Text> */}
          {/* <Text className="desc">服务时长</Text> */}
          <View className="price-count">
            <Text className="price">￥{order_price}</Text>
            <Text className="count">x{number}</Text>
          </View>
        </View>
      </View>
      <View className="pay-price-wrap">
        <Text className="pay-price">下单日期：{add_time}</Text>
        {orderStatus === 4 ? (
          <Text className="pay-price">已取消</Text>
        ) : (
          <Text className="pay-price">
            {orderStatus === 1 || (order_pay === 1 && orderStatus !== 3) ? '需' : '已'}付款:
            {order_price}
          </Text>
        )}
      </View>
      {orderStatus === 1 && (
        <View className="operation-wrap">
          <Button onClick={cancelAppoint} className="cancel">
            取消预约
          </Button>
          <Button className="confirm">确认</Button>
        </View>
      )}
    </View>
  );
};
export default AppointItem;
